<template>
  <div>
    <group class="dataGroup">
      <datetime
        v-model="dateValue"
        format="YYYY年MM月DD日" 
        clear-text="日期范围"
        year-row="{value}年" month-row="{value}月" day-row="{value}日"
        :placeholder="plhdText"
        @on-change="dataChange"
      ></datetime>
        <!-- 
        @on-confirm="onConfirm"
        @on-hide="log('hide', $event)" -->
    </group>
  </div>
</template>

<script>
import { Group, Datetime } from 'vux'
export default {
  props: {
    plhdText: String,
    dateType: String,
    defaultDateValue: String,
  },
  components: {
    Datetime,
    Group
  },
  data() {
    return {
      dateValue: '',
    }
  },
  watch: {
    defaultDateValue(string) {
      this.dateValue = string;
    }
  },
  methods: {
    dataChange(val) {
      const year = val.slice(0, 4)
      const month = val.slice(5, 7)
      const date = val.slice(8, 10)
      const newDate = year + '-' + month + '-' + date;
      const params = {
        type: this.dateType,
        value: newDate,
      }
      this.$emit('choDate', params)
    }
  }
}
</script>

<style lang="less" scoped>
  .dataGroup {
    /deep/ .vux-datetime {
      height: 0.81rem;
      width: 100%;
      border:1px solid #E5E8ED;
      border-radius: 0.1rem;
      background: #F7F7FA;
      margin-bottom: 0.24rem;
    }
    
    /deep/ .vux-no-group-title { margin-top: 0; }
    /deep/ .weui-cells:before, 
    /deep/ .weui-cells:after,
    /deep/ .weui-cell_access .weui-cell__ft:after {
        display: none;
    }

    /deep/ .weui-cell_access .weui-cell__ft {
      text-align: center;
      padding-right: 0;
    }

    /deep/ .vux-cell-value, /deep/ .vux-cell-placeholder { 
      color: #222;
      font-size: 0.28rem;
      line-height: 0.4rem;
    }

    /deep/ .vux-cell-placeholder {
      color: #C7C7C7;
    }
    
  }
</style>
